<template>
	 <view class="float-ball" :style="{ top: top + 'px', left: left + 'px' }" @touchmove="onTouchMove">
	    <text class="float-ball-text">活动</text>
	  </view>
</template>

<script>
	export default {
		data() {
			return {
				 top: 100, // 悬浮球的初始纵坐标
				 left: 100, // 悬浮球的初始横坐标
				 startX: 0, // 拖动开始时的横坐标
				 startY: 0, // 拖动开始时的纵坐标
			}
		},
		methods: {
			 onTouchMove(event) {
			      const { touches } = event;
			      const { clientX, clientY } = touches[0];
			      const offsetX = clientX - this.startX;
			      const offsetY = clientY - this.startY;
			      this.left += offsetX;
			      this.top += offsetY;
			      this.startX = clientX;
			      this.startY = clientY;
			    },
		}
	}
</script>

<style>
.float-ball {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.float-ball-text {
  color: #ffffff;
  font-size: 16px;
}
</style>
